<template>
  <div>
    <button @click="show = true">显示p</button>
    <button @click="color = 'red'">修改成红色</button>
    <p>{{ color }}</p>
    <son1 />
    <my-checkbox />

    <p v-if="show" v-color="color">{{ 10 | formatTime }}</p>
  </div>
</template>

<script>
import son1 from './components/son1'
export default {
  data () {
    return {
      color: 'orange',
      show: false
    }
  },

  // 写自定义指令的地方
  directives: {
    // color: {
    //   // 是指当绑定指令的元素插入到dom时会调用
    //   // el就是绑定这个指令的对象
    //   // binding是一个对象，里面包含了指令的相关信息，最主要的是里面有一个value，
    //   // 就是拿到绑定指令时传递的数据
    //   inserted (el, binding) {
    //     // console.log('调用了', el, binding)
    //     el.style.color = binding.value
    //   },

    //   // 当指令绑定的数据发生改变调用的
    //   // 参数跟inserted是一样的
    //   update (el, binding) {
    //     // console.log('数据改变了', binding.value) // 是修改后的值
    //     el.style.color = binding.value
    //   }
    // }

    // 如果当inserted里的代码和update里的代码一样时，可以简写
    // color (el, binding) {
    //   // 不管是插入到dom时还是数据改变它都会这个方法
    //   console.log('调用了')
    //   el.style.color = binding.value
    // }
  },
  // 注册局部组件：在哪注册，就只能在哪使用
  components: {
    son1,
  },
  // 局部过滤器：在哪注册就只能在哪使用
  filters: {
    // formatTime (val) {
    //   return val + '处理了时间'
    // }
  }
}
</script>

<style>

</style>